<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">关键字</label>
						<div class="layui-input-inline">
							<input type="text" name="keywords" placeholder="请输入查询关键字"
								class="layui-input">
						</div>
					</div>

					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit
							lay-filter="user-query">
							<i class="layui-icon layui-icon-search"></i> 查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i> 重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="user-table" lay-filter="user-table"></table>
		</div>
	</div>

	<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        新增
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		        <i class="layui-icon layui-icon-delete"></i>
		        删除
		    </button>
		</script>

	<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

	<script type="text/html" id="goods-enable">
			<input type="checkbox" name="enable" value="{{d.goodsstate}}" lay-skin="switch" lay-text="上架|下架" lay-filter="goods-enable" {{ d.goodsstate== 1 ? 'checked' : '' }} />
		</script>

	<script type="text/html" id="user-sex">
			{{#if (d.sex == 1) { }}
		    <span>男</span>
		    {{# }else if(d.sex == 2){ }}
		    <span>女</span>
		    {{# } }}
		</script>

	<script type="text/html" id="user-login">
			{{#if (d.login == 0) { }}
		    <span>在线</span>
		    {{# }else if(d.sex == 1){ }}
		    <span>离线</span>
		    {{# } }}
		</script>

	<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<script>
		layui.use([ 'table', 'form', 'jquery', 'common' ], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;

			let MODULE_PATH = "operate/";

			let cols = [ [ {
				type : 'checkbox'
			}, {
				title : '商品编号',
				field : 'goodsid',
				align : 'center',
				width : 100
			}, {
				title : '商品名称',
				field : 'goodsname',
				align : 'center'
			}, {
				title : '商品价格',
				field : 'goodsprice',
				align : 'center',
				width : 80
			}, {
				title : '简介',
				field : 'goodsinfo',
				align : 'center'
			}, {
				title : '数量',
				field : 'goodscount',
				align : 'center'
			}, {
				title : '状态',
				field : 'goodsstate',
				align : 'center',
				templet : '#goods-enable'

			}, {
				title : '操作',
				toolbar : '#user-bar',
				align : 'center',
				width : 130
			} ] ]

			table.render({
				elem : '#user-table',
				url : '../../../ajaxgoods.do', //请求自己定义的后端接口
				page : true,
				cols : cols,
				skin : 'line',
				toolbar : '#user-toolbar',
				defaultToolbar : [ {
					title : '刷新',
					layEvent : 'refresh',
					icon : 'layui-icon-refresh',
				}, 'filter', 'print', 'exports' ]
			});

			table.on('tool(user-table)', function(obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				}
			});

			table.on('toolbar(user-table)', function(obj) {
				if (obj.event === 'add') {
					window.add();
				} else if (obj.event === 'refresh') {
					window.refresh();
				} else if (obj.event === 'batchRemove') {
					window.batchRemove(obj);
				}
			});

			//查询按钮的单击

			form.on('submit(user-query)', function(data) {
				table.reload('user-table', {
					where : data.field,
					page : {
						curr : 1
					//重新从第 1 页开始
					}
				})
				return false;
			});

			form.on('switch(user-enable)', function(obj) {
				layer.tips(this.value + ' ' + this.name + '：'
						+ obj.elem.checked, obj.othis);
			});

			//新增商品
			window.add = function() {
				layer.open({
					type : 2,
					title : '新增',
					shade : 0.1,
					area : [ common.isModile() ? '100%' : '500px',
							common.isModile() ? '100%' : '400px' ],
					content : MODULE_PATH + 'addGoods.html'
				});
			}

			window.edit = function(obj) {
				layer.open({
					type : 2,
					title : '修改',
					shade : 0.1,
					area : [ '500px', '400px' ],
					content : MODULE_PATH + 'edit.html'
				});
			}

			window.remove = function(obj) {
				layer.confirm('确定要删除该用户', {
					icon : 3,
					title : '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url : MODULE_PATH + "remove/" + obj.data['userId'],
						dataType : 'json',
						type : 'delete',
						success : function(result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.msg, {
									icon : 1,
									time : 1000
								}, function() {
									obj.del();
								});
							} else {
								layer.msg(result.msg, {
									icon : 2,
									time : 1000
								});
							}
						}
					})
				});
			}

			window.batchRemove = function(obj) {

				var checkIds = common.checkField(obj, 'userId');

				if (checkIds === "") {
					layer.msg("未选中数据", {
						icon : 3,
						time : 1000
					});
					return false;
				}

				layer.confirm('确定要删除这些用户', {
					icon : 3,
					title : '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url : MODULE_PATH + "batchRemove/" + ids,
						dataType : 'json',
						type : 'delete',
						success : function(result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.msg, {
									icon : 1,
									time : 1000
								}, function() {
									table.reload('user-table');
								});
							} else {
								layer.msg(result.msg, {
									icon : 2,
									time : 1000
								});
							}
						}
					})
				});
			}

			window.refresh = function(param) {
				table.reload('user-table');
			}
		})
	</script>
</body>
</html>
